<template>
  <div class="spu">
    <!-- 选项分类卡片下拉菜单 -->
    <el-card shadow="always">
      <SelectTrait />
    </el-card>
    <!-- SKU卡片-->
    <el-card shadow="always" class="addSpu">
      <!-- spu 界面 -->
      <div v-show="userSpu.toggleTable == '0'">
        <el-button
          type="primary"
          :disabled="!userSpu.BaseListSpu.category3Id"
          @click="addSpu"
        >
          +添加SPU
        </el-button>
        <!--spu table组件 -->
        <el-table
          v-if="userSpu.BaseListSpu.category3Id"
          :data="userSpu.spuList"
          :border="true"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="spuName" label="SPU名称" />
          <el-table-column prop="description" label="SPU描述" />
          <el-table-column label="操作">
            <template #default="scope">
              <!-- 添加SKU -->
              <el-tooltip :enterable="false" content="添加SKU" placement="top">
                <el-button
                  type="primary"
                  icon="Plus"
                  circle
                  @click="addSku(scope.row)"
                />
              </el-tooltip>
              <!-- 修改 -->
              <el-tooltip
                :enterable="false"
                content="修改SPU数据"
                placement="top"
              >
                <el-button
                  type="warning"
                  icon="Edit"
                  circle
                  @click="updateSpu(scope.row)"
                />
              </el-tooltip>
              <!-- 查看 -->
              <el-tooltip
                :enterable="false"
                content="查看售卖商品"
                placement="top"
              >
                <el-button
                  type="info"
                  icon="InfoFilled"
                  circle
                  @click="seeSku(scope.row)"
                />
              </el-tooltip>
              <!-- 删除 -->
              <el-popconfirm
                title="确认需要删除吗?"
                @confirm="deleteSpu(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" icon="DeleteFilled" circle />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="userSpu.BaseListSpu.page"
          v-model:page-size="userSpu.BaseListSpu.limit"
          :page-sizes="[1, 5, 10, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userSpu.total"
          @size-change="sizeChange"
          @current-change="currentPageChange"
        />
      </div>
      <!-- 修改spu界面 -->
      <div v-show="userSpu.toggleTable == '1'">
        <SpuForm />
        <!-- 底部按钮 -->
        <el-button @click="userSpu.toggleTable = '0'">取消</el-button>
        <el-button
          type="primary"
          @click="save"
          :disabled="!userSpu.saleList.length"
        >
          保存
        </el-button>
      </div>
      <!-- 修改sku界面 -->
      <div v-show="userSpu.toggleTable == '2'">
        <SkuForm ref="sku" />
      </div>
    </el-card>
  </div>
  <!-- 查看SKU弹窗 -->
  <el-dialog v-model="dialogVisible" title="商品SKU" width="30%">
    <span>Spu</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
/* 引入API请求 */
import { reqSeeSku } from '@/apis/goods/spu/index'
/* 获取模块约束 */
import type { recordsData } from '@/apis/goods/spu/spuTypes'
import { ref, onBeforeUnmount, watch } from 'vue'
/* 获取分类Trait仓库 */
import { userGoodsTrait } from '@/store/goods/trait'
/* 获取SPU仓库 */
import { userSpuState } from '@/store/goods/spu'
/* 获取spu表单 */
import SpuForm from './spuForm.vue'
/* 获取SKU表单 */
import SkuForm from './skuForm.vue'
import { ElMessage } from 'element-plus'
/* trait分类模块仓库 */
const userTrait = userGoodsTrait()
/* Spu模块仓库 */
const userSpu = userSpuState()
/* 获取子组件实例SKUForm */
const sku = ref<any>([])
/* Sku查看弹窗 */
const dialogVisible = ref(false)
/* 商品已有SPU下的所有售卖商品 */
let goodsSku = ref({
  category3Id: '',
  id: '',
  isSale: '',
  price: '',
  skuAttrValueList: [],
  skuDefaultImg: '',
  skuDesc: '',
  skuImageList: [],
  skuName: '',
  skuSaleAttrValueList: [],
  spuId: '',
  tmId: '',
  weight: '',
})
/* 获取3及目录下的SPU */
const getBaseSpu = () => {
  userSpu.getBaseSpu(userSpu.BaseListSpu)
}
/* 分页当前页数变化的时候触发 */
const sizeChange = () => {
  userSpu.getBaseSpu(userSpu.BaseListSpu)
}
/* 分页每页条数变化的时候触发 */
const currentPageChange = () => {
  userSpu.getBaseSpu(userSpu.BaseListSpu)
}
/* 监听三级分类变化 */
watch(
  () => userTrait.threeCategoryId,
  () => {
    userSpu.BaseListSpu.category3Id = userTrait.threeCategoryId
    getBaseSpu()
  },
)
/* 修改spu */
const updateSpu = ({ category3Id, description, id, spuName }: any) => {
  /* 获取某个SPU下的全部的售卖商品的图片数据 */
  userSpu.getSpuImageList(id)
  /* 获取某一个SPU下全部的已有的销售属性接口地址 */
  userSpu.getSpuSalesList(id)
  /* 控制table表单与dislog显示 */
  userSpu.toggleTable = '1'
  /* 收集需要修改的数据 */
  userSpu.upDataSpu.category3Id = category3Id
  userSpu.upDataSpu.description = description
  userSpu.upDataSpu.id = id
  userSpu.upDataSpu.spuName = spuName
}
/* 外部表单 添加spu */
const addSpu = () => {
  /* 在添加spu弹窗打开前清空之前已经收集到的数据 */
  Object.assign(userSpu.upDataSpu, {
    category3Id: userSpu.BaseListSpu.category3Id,
    description: '',
    spuName: '',
    spuSaleAttrList: [],
    tmId: '',
    supImageList: [],
    id: '',
  })
  userSpu.saleList.splice(0, userSpu.saleList.length)
  userSpu.toggleTable = '1'
}
/* 保存修改spu */
const save = () => {
  /* 整理参数 */
  /* 1照片墙数据 */
  userSpu.spuImg = userSpu.spuImg.map((item: any) => {
    return {
      imgName: item.name,
      imgUrl: (item.response && item.response.data) || item.url,
    }
  })
  userSpu.upDataSpu.supImageList = userSpu.spuImg
  /* 2 整理销售属性数据 */
  userSpu.upDataSpu.spuSaleAttrList = userSpu.saleList
  /* 3发起请求 添加 || 修改SPU */
  userSpu.getUpdataSpu(userSpu.upDataSpu)
}
/* 删除SPU */
const deleteSpu = (row: recordsData) => {
  userSpu.deletspu(row.id)
}
/* 添加sku */
const addSku = (row: recordsData) => {
  userSpu.toggleTable = '2'
  sku.value.initSkuData(userTrait.oneCategoryId, userTrait.twoCategoryId, row)
}
/* 查看Sku */
const seeSku = async (row: recordsData) => {
  dialogVisible.value = true
  /* 发起请求查看该商品SKU */
  const { data: res }: any = await reqSeeSku(row.id)
  if (res.code != 200) ElMessage.error('查看失败')
  /* 将获取到的数据赋值给 goodsSKU */
  goodsSku.value = res.data
  console.log(res)
}
/* 当组件销毁时清空 数据*/
onBeforeUnmount(() => {
  Object.assign(userSpu.BaseListSpu, {
    page: 1 /* 当前页码 */,
    limit: 10 /* 每页条数 */,
    category3Id: '' /* 3及分类ID */,
  })
  userSpu.spuList = []
})
</script>

<style scoped lang="scss">
.spu {
  .selectBox {
    @include flexible(center);
    .el-form-item {
      flex: 1;
    }
  }
  .addSpu {
    margin-top: 30px;
    .el-table {
      margin-top: 25px;
    }
  }
}
</style>
